<template>
    <picker mode="multiSelector" 
            :value="multiIndex" 
            :range="multiArray" 
            @change="handleValueChange"
            @columnchange="handleColumnChange">
        <slot></slot>
    </picker>
</template>

<script>
	
	import API from '@/static/api/index.js';
    const CHINA_REGIONS = require('./regions.json');
	export default {
        props:{
			//默认值的
            defaultRegions:{
                type:Array,
                default(){
                    return []
                }
            },
            defaultRegion:[Array]
        },
		data() {
			return {
                cityArr:CHINA_REGIONS[0].childs,
                districtArr:CHINA_REGIONS[0].childs[0].childs,
                multiIndex: [0, 0, 0],
                isInitMultiArray:true,
			}
		},
        watch:{
            defaultRegion:{
                handler(region,oldRegion){
					// console.log(region,oldRegion)
                    if(Array.isArray(region)){
                        this.handleDefaultRegion(region)
                    }else{
                        console.warn('defaultRegion非有效格式')
                    }
                },
                immediate:true,
            }
        },
        computed:{
            multiArray(){
				// console.log(this.pickedArr.map(arr=>arr.map(item=>item.name)))
                return this.pickedArr.map(arr=>arr.map(item=>item.name))
            },
            pickedArr(){
                // 进行初始化
                if(this.isInitMultiArray){
                    return [
                        CHINA_REGIONS,
                        CHINA_REGIONS[0].childs,
                        CHINA_REGIONS[0].childs[0].childs
                    ]
                }
                return [CHINA_REGIONS,this.cityArr,this.districtArr];
            }
        },
		created() {
			// API.getAreaList().then(res=>{
			// 	let arr = this.setArr(res.data.areas);
			// 	console.log(JSON.stringify(arr))
			// })
		},
		methods: {
			setArr(arr){ //递归出省市区
				let newArr = [];
				arr.forEach(e=>{
					newArr.push({id:e.id,pid:e.pid,name:e.name,childs:arr.length>0?this.setArr(e.childs):[]});
				})
				return newArr;
			},
            handleColumnChange(e){
                // console.log(e);
                this.isInitMultiArray = false;
                const that = this;
                let col = e.detail.column;
                let row = e.detail.value;
                that.multiIndex[col] = row;
                try{
                    switch(col){
                        case 0:
                            if(CHINA_REGIONS[that.multiIndex[0]].childs.length==0){
                                that.cityArr = that.districtArr = [CHINA_REGIONS[that.multiIndex[0]]]
                                break;
                            }
                            that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs
                            that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs;
                            break;
                        case 1:
                            that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs;
                            break;
                        case 2:
                            break;
                    }
                }catch(e){
                    // console.log(e);
                    that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs
                }
                
            },
            handleValueChange(e){
                // 结构赋值
                let [index0,index1,index2] = e.detail.value;
                let [arr0,arr1,arr2] = this.pickedArr;
                let address = [arr0[index0],arr1[index1],arr2[index2]];
                // console.log(address);
                this.$emit('getRegion',address)
            },
            handleDefaultRegion(idArr){ // 获取index
                this.isInitMultiArray = false;
				try{
					let children = CHINA_REGIONS;
					let pIndex = children.findIndex(o=>o.id==idArr[0])||0;
					let cIndex = children[pIndex].childs.findIndex(o=>o.id==idArr[1])||0;
					this.cityArr = children[pIndex].childs
					let aIndex = children[pIndex].childs[cIndex].childs.findIndex(o=>o.id==idArr[2])||0;
					this.districtArr = children[pIndex].childs[cIndex].childs;
					this.multiIndex = [pIndex,cIndex,aIndex];
				}catch(err){
					this.isInitMultiArray = true;
				}
            }
		},
	}
</script>
